<template>
  <div>
    <el-dialog :visible="isShow" @close="cancle" fullscreen width="50%">
      <template #title>
        <div class="title">{{ title }}</div>
      </template>
      <div class="content">
        <el-form label-width="80px" ref="form" :model="form" :rules="rules">
          <el-form-item label="学科" prop="subject">
            <el-select v-model="form.subject" placeholder="请选择">
              <el-option
                v-for="item in subjectList"
                :key="item.id"
                :value="item.id"
                :label="item.short_name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="阶段" prop="step">
            <el-select v-model="form.step" placeholder="请选择">
              <el-option
                v-for="(item, key, index) in stepItem"
                :key="index"
                :value="+key"
                :label="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业" placeholder="请选择" prop="enterprise">
            <el-select v-model="form.enterprise">
              <el-option
                v-for="item in enterpriseList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市" prop="city">
            <el-cascader
              size="large"
              v-model="form.city"
              :options="options"
              :props="{ value: 'label' }"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label="题型" prop="type">
            <el-radio-group v-model="form.type">
              <el-radio
                v-for="(item, key, index) in typeItem"
                :key="index"
                :label="+key"
                >{{ item }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="难度" prop="difficulty">
            <el-radio-group v-model="form.difficulty">
              <el-radio
                v-for="(item, key, index) in diffItem"
                :key="index"
                :label="+key"
                >{{ item }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <hr />
          </el-form-item>
          <el-form-item label="试题标题" prop="title">
            <quillEditor v-model="form.title" class="editor"></quillEditor>
          </el-form-item>
          <el-form-item
            :label="typeItem[form.type]"
            :prop="questionTypes[form.type]"
          >
            <QuestionTypes :form="form"></QuestionTypes>
          </el-form-item>
          <el-form-item label="解析视频">
            <m-video v-model="form.video"></m-video>
            <div>只能上传视频格式文件</div>
          </el-form-item>
          <el-form-item label="答案解析" prop="answer_analyze">
            <quillEditor
              v-model="form.answer_analyze"
              class="editor"
            ></quillEditor>
          </el-form-item>
          <el-form-item>
            <hr />
          </el-form-item>
          <el-form-item label="试题备注" prop="remark">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.remark"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <template>
          <div class="btn">
            <el-button @click="cancle">取消</el-button>
            <el-button type="primary" @click="onSubmit">确定</el-button>
          </div>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MVideo from '@/components/img.vue'
import QuestionTypes from './questionTypes.vue'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { regionData } from 'element-china-area-data'
import { addQuestionAPI, editQuestionAPI } from '@/api/question.js'
export default {
  name: 'AddQuestion',
  components: {
    MVideo,
    QuestionTypes,
    quillEditor
  },
  props: {
    subjectList: {
      type: Array,
      required: true
    },
    stepItem: {
      type: Object,
      required: true
    },
    enterpriseList: {
      type: Array,
      required: true
    },
    typeItem: {
      type: Object,
      required: true
    },
    diffItem: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      isShow: false,
      textarea: '',
      mode: 'add',
      options: regionData,
      questionTypes: {
        1: 'single_select_answer',
        2: 'multiple_select_answer',
        3: 'short_answer'
      },
      form: {
        title: '',
        subject: '',
        step: '',
        enterprise: '',
        city: [],
        type: 1,
        difficulty: '',
        single_select_answer: '',
        multiple_select_answer: [],
        short_answer: '',
        video: '',
        answer_analyze: '',
        remark: '',
        select_options: [
          {
            label: 'A',
            text: '',
            image: ''
          },
          {
            label: 'B',
            text: '',
            image: ''
          },
          {
            label: 'C',
            text: '',
            image: ''
          },
          {
            label: 'D',
            text: '',
            image: ''
          }
        ]
      },
      rules: {
        subject: [{ required: true, message: '请选择学科', trigger: 'change' }],
        step: [{ required: true, message: '请选择阶段', trigger: 'change' }],
        enterprise: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        city: [{ required: true, message: '请选择城市', trigger: 'change' }],
        type: [{ required: true, message: '请选择题型', trigger: 'change' }],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'change' }
        ],
        title: [{ required: true, message: '请填写标题', trigger: 'change' }],
        single_select_answer: [
          { required: true, message: '请选择单选答案', trigger: 'change' }
        ],
        multiple_select_answer: [
          { required: true, message: '请选择多选答案', trigger: 'change' }
        ],
        short_answer: [
          { required: true, message: '请填写简答', trigger: 'change' }
        ],
        answer_analyze: [
          { required: true, message: '请填写答案解析', trigger: 'change' }
        ],
        remark: [
          { required: true, message: '请填写答案备注', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    onSubmit () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          if (this.mode === 'add') {
            const result = await addQuestionAPI(this.form)
            if (result.message === 'ok') {
              this.$message.success('新增成功')
              this.isShow = false
              this.$emit('getQuestionList')
            }
          }
          if (this.mode === 'edit') {
            const result = await editQuestionAPI(this.form)
            // console.log(result)
            if (result.message === 'ok') {
              this.$message.success('编辑成功')
              this.isShow = false
              this.$emit('getQuestionList')
            }
          }
        } else {
          this.$message.error('验证失败')
          return false
        }
      })
    },
    cancle () {
      this.isShow = false
      this.$refs.form.resetFields()
      this.form = {
        title: '',
        subject: '',
        step: '',
        enterprise: '',
        city: [],
        type: 1,
        difficulty: '',
        single_select_answer: '',
        multiple_select_answer: [],
        short_answer: '',
        video: '',
        answer_analyze: '',
        remark: '',
        select_options: [
          {
            label: 'A',
            text: '',
            image: ''
          },
          {
            label: 'B',
            text: '',
            image: ''
          },
          {
            label: 'C',
            text: '',
            image: ''
          },
          {
            label: 'D',
            text: '',
            image: ''
          }
        ]
      }
    }
  },
  computed: {
    title: function () {
      return { add: '新增题库测试', edit: '编辑题库测试' }[this.mode]
    }
  }
}
</script>

<style lang="less">
.title {
  height: 53px;
  line-height: 53px;
  padding-left: 15px;
  color: #fff;
  background: linear-gradient(to right, #01c4fa, #1294fa);
}
.el-dialog__header {
  padding: 0;
}
.btn {
  text-align: center;
}
.content {
  width: 835px;
  margin-left: 367px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.editor {
  display: block;
}
</style>
